import Vue from 'vue'

const component = {
    template: `
        <div :style='style'>
            <slot name='header'></slot>
            <div></div>
            <slot name='body'></slot>
            <div>
                <slot name='footer1' :aaa='value' ccc='ccc123'></slot>
            </div>
            <div>
            <slot name='footer2' :aaa='value' ccc='ccc1231'></slot>
        </div>
        </div>
    `,
    data() {
        return {
            value: 'aaa123',
            style: {
                width: '200px',
                height: '200px',
                border: '1px solid #aaa'
            }
        }
    }
}

new Vue({
    el: '#app',

    template: `
    <div>

    <component2 ref='comp'>
        <span slot='header' ref='spanheader'> this is header</span>

        <span slot='body'> this is body</span>

        <span slot='footer1' slot-scope="footer" >{{value}}-{{footer.aaa}}-{{footer.ccc}}</span>

        <span slot='footer2' slot-scope="footer" >{{value}}-{{footer.aaa}}-{{footer.ccc}}</span>
    </component2>
    </div>
    `,
    data() {
        return {
            value: 'abc123'
        }
    },
    mounted() {
        //refs 在主键上，返回的是当前主键，可以操作当前主键，在HTML上返回的是html标签
        console.log(this.$refs.comp, this.$refs.spanheader)
    },
    components: {
        component2: component
    }
})
